<template>
    <!--start 主题页面-->
    <el-container>

      <!--start 第一行主菜单区域-->
      <el-header>
        <!--start logo区域-->
        <logo></logo>
        <!--end logo 区域-->
        <!--start 主菜单区域-->
        <mainMenu></mainMenu>
        <!--end 主菜单区域-->
      </el-header>
      <!--end 第一行主菜单区域-->

      <!--start 子菜单和内容展示区域-->
      <el-container>
        <el-aside width="240px" v-bind:style="{height: meunHeight + 'px'}">
          <!--start 左边菜单区域-->
          <subMenu></subMenu>
          <!--end 左侧菜单区域-->
        </el-aside>
        <el-container>
          <!--start 区域展示区域-->
          <el-main class="el-main">
            <!--start tab区域-->
            <tabContent></tabContent>
            <!--end tab页面-->
          </el-main> 
          <!--end 视图展示区域-->
          <!--footer 区域-->
          <el-footer>Copyright © 2018 智干电商</el-footer>
        </el-container>
        <!--end 子菜单和内容展示区域-->
      </el-container>
      <!--end 子菜单和内容展示区域-->

    </el-container>
    <!--end 主题页面-->
</template>

<script type="text/javascript">
  import MainMenu from '@/components/basic/MainMenu';
  import SubMenu from '@/components/basic/SubMenu';
  import Logo from '@/components/basic/Logo';
  import TabContent from '@/components/basic/TabContent';

  export default {
    components: {
       MainMenu,
       SubMenu,
       Logo,
       TabContent
    },
    data() {
      console.log(document.documentElement.clientHeight);
      return {
           // 设置左侧菜单栏高度，根据浏览器高度来定
           meunHeight: document.documentElement.clientHeight - 60,
      }
    },
    methods: {
    }
  }
</script>

<style>
  .el-header {
    /*background-color: #409EFF;*/
    background-color: rgb(84, 92, 100);
    color: #333;
    text-align: left;
    padding: 0px;
    line-height: 60px;
  }

  .el-footer {
    background-color: #f8f8f8;
    border-top: #cccccc solid 1px;
    font-size: 10px;
    font-weight: 600;
    color: #333333;
    text-align: center;
    height: 26px !important;
    line-height: 26px;
  }
  
  .el-aside {
    background-color: #ececec;
    color: #333;
    text-align: left;
  }
  
  .el-main {
    background-color: #f8f8f8;
    color: #333;
    padding: 0px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>